<template>
    <div class="informationPage">
        <div class="information">
            <mu-tabs  inverse color="#333" indicator-color="#EB4D44" >
                <mu-tab @click.stop="getAllRemind(1)">所有提醒</mu-tab>
                <mu-tab @click.stop="getAllRemind(2)">未读提醒</mu-tab>
            </mu-tabs>
            <Loading  v-if="notMore"  class="empty-text-wrap" />
            <mu-load-more @load="load" :loading="loading">
                <div class="list_box" v-if="active === 0">
                    <!--党费缴纳暂未开通 通知里面不做显示-->
                    <div class="list" v-for="(item,index) in informNewsData" :key="index" @click.stop="navToDetail(item)" v-show="item.status!=4">
                        <!--1党的会议 2活动报名 3通知发布 4党费缴纳 5考试 6每日一学 7一颗红心 8党建微视 9党建相册-->
                        <div class="list_left"><img src="@as/img/wode_khxx@2x.png" alt=""></div>
                        <div class="list_right">
                            <div class="list_top">
                                <span class="list_title" v-if="item.status==1">党的会议</span>
                                <span class="list_title" v-if="item.status==2">活动报名</span>
                                <span class="list_title" v-if="item.status==3">通知发布</span>
                                <span class="list_title" v-if="item.status==4">党费缴纳</span>
                                <span class="list_title" v-if="item.status==5">考试</span>
                                <span class="list_title" v-if="item.status==6">每日一学</span>
                                <span class="list_title" v-if="item.status==7">一颗红心</span>
                                <span class="list_title" v-if="item.status==8">党建微视</span>
                                <span class="list_title" v-if="item.status==9">党建相册</span>
                                <span class="list_time">{{item.create_time |time2}}</span>
                            </div>
                            <div class="list_bottom">
                            <span class="list_content">
                               {{item.content}}
                            </span>
                                <span class="list_icon" v-if="item.is_see==2"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_box" v-if="active === 1">
                    <div class="list" v-for="(item,index) in informNewsData" :key="index" @click.stop="navToDetail(item)" v-show="item.status!=4">
                        <!--1党的会议 2活动报名 3通知发布 4党费缴纳 5考试 6每日一学 7一颗红心 8党建微视 9党建相册-->
                        <div class="list_left"><img src="@as/img/wode_khxx@2x.png" alt=""></div>
                        <div class="list_right">
                            <div class="list_top">
                                <span class="list_title" v-if="item.status==1">党的会议</span>
                                <span class="list_title" v-if="item.status==2">活动报名</span>
                                <span class="list_title" v-if="item.status==3">通知发布</span>
                                <span class="list_title" v-if="item.status==4">党费缴纳</span>
                                <span class="list_title" v-if="item.status==5">考试</span>
                                <span class="list_title" v-if="item.status==6">每日一学</span>
                                <span class="list_title" v-if="item.status==7">一颗红心</span>
                                <span class="list_title" v-if="item.status==8">党建微视</span>
                                <span class="list_title" v-if="item.status==9">党建相册</span>
                                <span class="list_time">{{item.create_time |time2}}</span>
                            </div>
                            <div class="list_bottom">
                            <span class="list_content">
                               {{item.content}}
                            </span>
                                <span class="list_icon" v-if="item.is_see==2"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </mu-load-more>
            <div class="loading" v-if="loadOver&&!notMore" :class="{'notOnePage':p!=1}">{{loaded}}</div>
        </div>
    </div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    export default {
        data() {
            return {
                num: 10,
                p: 1,
                loading: false,
                loaded: "加载更多...",
                method: "",
                active: 0,
                state:1,
                informNewsData:[],
                notMore: false,
                loadOver:false,
            }
        },
        components:{
            Loading
        },
        mounted() {
            this.$progress.done();
            // this.initClass();
            this.getNewsData(this.p,this.state)
        },
        methods: {
            navToDetail(item){
            //    更新通知消息
                if(item.is_see==2){
                    this.$http
                        .post("app/my/see_info", {
                            id:item.id
                        });
                }
            //      <!--1党的会议 2活动报名 3通知发布 4党费缴纳 5考试 6每日一学 7一颗红心 8党建微视 9党建相册-->
                if(item.status==1){
                    this.$router.push({ path: '/organization/meetingDetails' , query: {
                            id:item.res_id
                        }})
                }else if(item.status==2){
                    this.$router.push({ path: '/organization/activityDetails' , query: {
                            id:item.res_id
                        }})
                }else if(item.status==3){
                    this.$router.push({ path: '/organization/notice_details' , query: {
                            id:item.res_id
                        }})
                }else if(item.status==4){
                    this.$router.push({ path: '/mine/PartyPayment' , query: {
                            id:item.res_id
                        }})
                }else if(item.status==5){
                    this.$router.push({ path: '/learn/onlineExam' })
                }else if(item.status==6){
                    this.$router.push({ path: '/learn/studyPlan' })
                }else if(item.status==7){
                    this.$router.push({ path: '/propaganda/details/loveDetails' , query: {
                            id:item.res_id
                    }})
                }else if(item.status==8){
                    this.$router.push({ path: '/propaganda/videoList/videoList' , query: {
                            id:item.res_id
                        }})
                }else if(item.status==9){
                    this.$router.push({ path: '/propaganda/details/albumDetails' , query: {
                            id:item.res_id
                    }})
                }
            },
            getAllRemind(state){
                this.p=1;
                this.informNewsData=[];
                if(state==1){
                    this.active =0;
                    this.state =1;
                    this.getNewsData(this.p,this.state)
                }else{
                    this.active =1;
                    this.state =2;
                    this.getNewsData(this.p,this.state)
                }
            },
            initData(p) {
                this.$http
                    .post("app/workplan/index_app", {
                        p: p,
                        page: 10,
                        class_id:'2',
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                        if (res.data.length < 10) {
                            this.loaded = "没有更多";
                            this.newsList.push(...res.data);
                            this.loading = true;
                            this.notMore = false;
                            return;
                        }
                        this.newsList.push(...res.data);
                        this.loading = false;
                    });
            },
            getNewsData(p,state){
                this.$http
                    .get("app/my/info_list", {
                        p: p,
                        page:7,
                        state:state,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                        if(res.data.length){
                            this.informNewsData.push(...res.data);
                        }
                        this.loadOver =false;
                        if(p!=1){
                            console.log(res.data);
                            if(res.data.length){
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }else {
                            if(!res.data.length){
                                this.notMore =true;
                                this.loadOver =false;
                            }else{
                                if(res.data.length<7&&res.data.length!=0){
                                    console.log(1111111)
                                    this.loadOver =true;
                                    this.loaded='没有更多数据了'
                                }
                            }
                        }
                    });
            },
            load() {
                console.log(123)
                //因为load 触发多次 所以做分时节流
                // this.loading = true;
                // if (this.notMore) {
                //     clearTimeout(this.method);
                //     this.method = setTimeout(() => {
                //         this.p = this.p + 1;
                //         this.initData(this.p);
                //     }, 500);
                // }
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.getNewsData(this.p,this.state);
                        this.loading =false;
                    }, 2000);
                }
            },
            initClass(){
                this.$http
                    .post("app/workplan/index_class", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                    })

            },
        },
    }
</script>

<style scoped>
    .informationPage{
         height: 100vh;
    }
    .information{
        height: 100%;
    }
    .empty-text-wrap .information{
        width: 100%;
        height: 100%;
    }
    .information .mu-tabs {
        position: relative;
        background: #fff;
        background-color: transparent !important;
    }


    .information .mu-tab-link-highlight {
        width: 24px !important;
        background: linear-gradient(235deg, rgba(235, 77, 68, 1), rgba(244, 117, 72, 1)) !important;
        margin-left: 18px;
    }

    .information .mu-tab {
        font-size: 14px;
        color: #666;
        min-width: 60px;
    }

    .information .mu-tab-active {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    .information {
        width: 343px;
        margin: 0 16px;
    }

    .list {
        display: flex;
        flex-direction: row;
        height: 93px;
        border-bottom: 1px solid #ddd;
    }

    .list_left {
        max-width: 28px;
        max-height: 25px;
        text-align: center;
        margin-top: 34px;
        line-height: 25px;
    }

    .list_left img {
        width: 100%;

    }

    .list_top {
        display: flex;
        justify-content: space-between;
    }

    .list_right {
        margin-left: 10px;
        width: 100%;
        margin-top: 20px;
        display: inline-block;
    }

    .list_right .list_title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .list_right .list_time {
        font-size: 12px;
        font-weight: 500;
        color: #999;
    }

    .list_bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        position: relative;
    }

    .list_bottom .list_content {
        font-size: 16px;
        font-weight: normal;
        color: #666;
        width: 275px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .list_bottom .list_icon {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -2px;
        display: inline-block;
        width: 4px;
        height: 4px;
        text-align: center;
        color: #fff;
        background: #EB4D44;
        border: 1px solid #EB4D44;
        border-radius: 50%;
        box-sizing: content-box;
    }
    .loading {
        width: 343px;
        margin: 0 16px 14px;
        font-size: 14px;
        color: #dddddd;
        clear: both;
        line-height: 30px;
        text-align: center;
        /*margin-top: -30px;*/
    }
    .loading.notOnePage{
        margin-top: -30px;
    }
    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .informationPage /deep/ .mu-infinite-scroll{
        /*display: none;*/
        /*height: 0;*/
    }
    .informationPage /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }
</style>